<template>
  <h1>El-开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      style="--el-switch-on-color: #394A3C; --el-switch-off-color: red"
  />

  <el-switch
      v-model="isShow"
      style="--el-switch-on-color: #394A3C; --el-switch-off-color: #451fff"
  ></el-switch>
  <hr>
  <div v-if="isShow">
    <img src="fcq.jpg" width="200">
  </div>
  <hr>
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="numStr" active-value="1" inactive-value="0"></el-switch>

</template>

<script setup>
import { ref } from 'vue';
const num = ref(0);
const numStr = ref('0');

const value1 = ref(false);
const value2 = ref(true);
const isShow = ref(true);
</script>

<style scoped>

</style>